<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>别踩白块极速模式</title> 
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" /> 
  <script type="text/javascript" src="./jquery.js"></script>
  <style>
#cont{
    box-sizing: content-box;
	width: 400px;
	height: 400px;
	border: 15px solid black;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}
#main{
	width: 400px;
	height: 400px;
/* 	border: 1px solid red;  */
	position: relative;
    top: -100px;
}
.row{
	height: 100px;
	width: 100%;
}
.row div{
	width: 100px;
	height: 100px;
	/* border: 1px solid black; */
	float: left;
}
.black{
	background: black;
}
h1{
	text-align: center;
}
h2{
	text-align: center;
}
ul{
	list-style-type: none;
}
li{
	font-size: 30px;
	text-align: center;
	/* line-height: px; */
	margin-top:18px;
}
.red{
	color: red;
}
.blue{
	color: blue;
}		
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="col-md-3"> 
    <img src="./被踩白块图片.jpg" alt="" class="img-rounded" />
    <ul>
        <li>加</li>
    	<li class="red">油</li>
    	<li>喽</li>
    	<li class="red">不</li>
    	<li>要</li>
    	<li class="red">灰</li>
    	<li>心</li>
    </ul>
   </div> 
   <div class="col-md-6"> 
    <h1>别踩白块</h1> 
    <h2>0</h2> 
    <div id="cont"> 
     <div id="main"></div> 
    </div> 
   </div> 
   <div class="col-md-3"> 
    <img src="./小游戏联盟.jpg" alt="" class="img-rounded" />
    <ul>
     	<li class="blue">胜</li>
     	<li>利</li>
     	<li class="blue">就</li>
     	<li>在</li>
     	<li class="blue">眼</li>
     	<li>前</li>
    </ul> 
   </div> 
  </div> 
  <script type="text/javascript">
    alert('开始游戏');

	var main = document.getElementById('main');
    /*创建一个div*/
	function cDiv(className){
        var div = document.createElement('div');
        if(className){
           div.className = className;
        }
        return div; 
	}
	/*调用4次cRow我们就可以创建4行Row了*/    
	function init(){
		for(var i=0;i<4;i++){
		    cRow();
	    }
	}   
    init();
	/*创建一行row 即4个div*/
	function cRow(){
		/*在一个0~3之间的随机数*/
		var rand = Math.floor(Math.random()*4);
		/*在造一个行div*/
		var row = cDiv('row');
		row.style.marginLeft = '0px';
		/*再造4个小的div*/
		for(var i=0;i<4;i++){
			/*如果随机数等于i就创建一个<div class="black"></div>这样的div*/
			if(i == rand){
				/*创建一个黑色div*/
				row.appendChild(cDiv('black'));
            }else{
				/*创建一个普通div*/
				row.appendChild(cDiv());
			}
			
	}
/*把row塞到main区域里,在这里我们要做一个判断,因为appendChild是默认插到最后一个的*/
	     if(main.firstChild){
		 	/*main如果有第一个孩子的话,我们后面创建的div就要在第一个孩子之前*/
			main.insertBefore(row,main.firstChild);
		 }else{
		 	/*main如果没有第一个孩子的话就用appendChild也没有关系*/
		     main.appendChild(row);
	     }
    }
 
    
    /*我们只要改变main的top值就可以上下活动了,所以我们要获取计算后的样式*/
	function getStyle(el,attr){
 	return el.currentStyle?el.currentStyle[attr]:getComputedStyle(el,null)[attr];
    }
/*声明一个全局变量,后面的加速需要用到*/
var s = 2;
/*我们想让他运动需要改变main.style.top值*/
	function move(){
	var t = parseInt(getStyle(main,'top')) + s + 'px';
	main.style.top = t;
/*在这里我们要判断一下如果main.style.top等于个零的话,我们就删除main里面的最后一个孩子*/
	if(parseInt(main.style.top) >= 0 ){
        /*删除最后一个孩子的同时我们要在最上方创建一个cRow*/
		cRow();
		/*在top等于零的情况下我们删除最后一个孩子的同时,我们发现我们需要把top初始化*/
		main.style.top = '-100px';
	/*当main区域的子元素长度大于5的时候我们要删除最后一个孩子*/	
	if(main.children.length > 5){
		main.removeChild(main.lastChild);
	}	
    /*当如果有黑块出现在最后一排,且top等于零的时候,我们需要结束游戏*/
	if(main.lastChild.pass == undefined){
		/*清除定时器*/
		clearInterval(dsq);
		/*把全局变量赋值为false,不执行后面的加分效果*/
		dong = false;
		alert('游戏结束');
	}

	}
}
var dsq = setInterval("move()",50);
/*在全局赋一个变量为true,当游戏结束了就为false,不执行后面的加分效果*/
var dong = true;
/*当鼠标点击黑块的时候,分数+1*/
    main.onclick = function(ev){
    	/*游戏结束之后我们再点击黑块我们是不得分的*/
    	if(dong == false){
    		alert('重开一局');
    	/*判断一下当鼠标点的className为空说明点的是白块游戏结束,并且结束定时器*/
    	}else if(ev.target.className == ''){
    		/*清除定时器*/
    		clearInterval(dsq);
    		/*把全局变量赋值为false,不执行后面的加分效果*/
    		dong = false;
    		alert('游戏结束');
    	}else{
    		/*当鼠标点击黑块的时候,我们要把className附空就是变白*/
    		ev.target.className = '';
    		/*在成功的点击黑块的同时我们在给div的父类再添加一个pass属性*/
    		ev.target.parentNode.pass = true;
    		/*找到那个h2标签*/
    		var h2 = document.getElementsByTagName('h2')[0];
    		/*在进行加分*/
    		h2.innerHTML = parseInt(h2.innerHTML) + 1;
    		/*当在得分情况下我们要加速了*/
    		if(parseInt(h2.innerHTML)%5 == 0){
                 s = s + 2;
    		}
    	}
    	
    }
</script>
<script type="text/javascript">
$(function(){
	
	setInterval(function p(){
		$('ul:first li').toggleClass('red');
	},500);

	setInterval(function t(){
		$('ul:last li').toggleClass('blue');
	},500);
})
</script>  
</body>
</html>